<script setup>


import {getDemoApi} from "../../api/DemoApi.js";
import {reactive,ref} from 'vue'
const  userInfo = ref({
  name:'',
  age:null,
  time:null
})
const getUser = ()=>{
  getDemoApi().then(res=>{
    userInfo.value.name = res.data.name
    userInfo.value.age = res.data.age
    userInfo.value.time = new Date().getTime()
  })

}
</script>

<template>
  <div>
    <h2>demo05</h2>
    <h2>测试axios的http请求</h2>

    <el-form :model="userInfo" label-width="auto" style="max-width: 600px">
      <el-form-item label="姓名">
        <el-input v-model="userInfo.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="userInfo.age" placeholder="请输入年龄"></el-input>
      </el-form-item>
      <el-form-item label="时间戳">
        <el-input v-model="userInfo.time" placeholder="请输入年龄"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getUser">查询</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  background-color: #fafafa;
  font-size: 30px;
}


</style>